
    <div class="am-demo-page">
      <div style="padding: 15px;font-size: 16px;">步骤条</div>
      <div class="am-demo-bd am-wingblank am-wingblank-lg">
        <div><div class="sub-title">Basic range ngModel</div></div>
        <div>
          <Range [ngModel]="valueModel" [min]="0" [max]="20" (ngModelChange)="changeModel($event)"> </Range>
        </div>
      </div>
      <div class="am-demo-bd am-wingblank am-wingblank-lg">
        <div><div class="sub-title">Basic range</div></div>
        <div>
          <Range
            [defaultValue]="[3, 10]"
            [min]="0"
            [max]="20"
            (onChange)="change($event)"
            (onAfterChange)="afterChange($event)"
          ></Range>
        </div>
      </div>
      <div class="am-demo-bd am-wingblank am-wingblank-lg">
        <div><div class="sub-title">Disabled range</div></div>
        <div>
          <Range
            [defaultValue]="[3, 10]"
            [min]="0"
            [max]="20"
            [disabled]="true"
            (onChange)="change($event)"
            (onAfterChange)="afterChange($event)"
          ></Range>
        </div>
      </div>
      <div class="am-demo-bd am-wingblank am-wingblank-lg">
        <div><div class="sub-title">Range with customized style</div></div>
        <div>
          <Range
            [defaultValue]="[3, 10]"
            [min]="0"
            [max]="20"
            [trackStyle]="trackStyle"
            [railStyle]="railStyle"
            [handleStyle]="handleStyle"
            (onChange)="change($event)"
            (onAfterChange)="afterChange($event)"
          ></Range>
        </div>
      </div>
    </div>
  